<template>
  <div :style="{height:getScreenHeight()+'px'}">
    <image class="bgimg" src="root:img/bg.png" resize="cover" />
    <div style="flex:1">
      <div class="wrappess">
        <text class="title">GIV</text>
        <!-- 账户登录 -->
        <div class="inputBox bb" v-if="loginType=='account'">
          <div class="inputIcon br">
            <text class="iconfont icons">&#xe782;</text>
          </div>
          <input
            type="text"
            :value="account"
            class="input"
            placeholder="Email/Phone"
            @input="onChange"
            placeholder-color="#c3c3c3"
          />
        </div>
        <!-- 手机号 -->
        <div class="inputBox bb" v-if="loginType=='phone'">
          <div class="inputIcon">
            <text class="iconPhone">+61</text>
          </div>
          <input
            type="tel"
            :value="phone_number"
            class="input"
            placeholder
            :maxlength="phoneLength"
            @input="changePhone"
          />
        </div>
        <!-- 密码 -->
        <div class="inputBox bb">
          <div class="inputIcon br" v-if="loginType=='account'">
            <text
              class="iconfont icons"
              v-if="inputType=='password'"
              @click="inputType='text'"
            >&#xe635;</text>
            <image
              class="eyeImg"
              v-if="inputType=='text'"
              @click="inputType='password'"
              src="root:img/eye.png"
              alt
            />
          </div>

          <input
            v-if="loginType=='account'"
            :type="inputType"
            :value="password"
            class="input"
            placeholder="Password"
            @input="changep"
            placeholder-color="#c3c3c3"
          />
          <input
            v-if="loginType=='phone'"
            type="tel"
            :value="verify"
            class="input"
            placeholder
            @input="changeV"
            placeholder-color="#c3c3c3"
          />
          <text class="codeBtn" v-if="loginType=='phone'&&state">{{ currentTime }} s</text>
          <text
            class="codeBtn"
            v-if="loginType=='phone'&&!state"
            @click="send_verify_code"
          >Receive Sms code</text>
        </div>
        <div class="loginTypeBox">
          <text
            class="loginType"
            v-if="loginType=='account'"
            @click="loginType='phone'"
          >SMS Verification code login</text>
          <text
            class="loginType"
            v-if="loginType=='phone'"
            @click="loginType='account'"
          >Account login</text>
        </div>

        <text class="singnIn" @click="login">Sign in</text>

        <text class="registerBtn" @click="register">Register</text>
      </div>
      <div class="rowBox">
        <!-- <text class="br h20"></text>
        <text class="boxItem">Forgot password</text>-->
        <text class="loginType" @click="push('root:app/login/agreement.js')">User Agreement</text>
      </div>
    </div>

    <div v-if="loading" class="maskClack" @click="event=> event.stopPropagation()">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</template>

<script>
import asCore from "../../mixin/core";
import { send_verify, loginWithPw, verify_login } from "../../mixin/ajax.js";

export default {
  data() {
    return {
      loading: false,
      loginType: "account",
      inputType: "password",
      phone_number: "",
      state: false, //是否开启倒计时
      totalTime: 60, //总时间，单位秒
      recordingTime: 0, //记录时间变量
      currentTime: 0, //显示时间变量
      verify: "",
      account: "",
      password: "",
      isShowOauth: false,
      showProvider: {
        weixin: false,
        qq: false,
        sinaweibo: false,
        xiaomi: false
      }
    };
  },
  computed: {
    phoneLength() {
      if (this.phone_number.indexOf("0") == 0) {
        return 10;
      } else {
        return 9;
      }
    }
  },
  created() {
    var pref = weex.requireModule("storage");
    let that = this;
    pref.getItem("as_username", event => {
      if (event.result == "success") {
        that.account = event.data;
      }
    });
    pref.getItem("as_password", event => {
      if (event.result == "success") {
        that.password = event.data;
      }
    });
  },

  methods: {
    onLoad(parmar) {
      if (parmar && parmar.userId) {
        var pref = weex.requireModule("storage");
        pref.setItem("inviteCode", parmar.userId);
      }
    },
    onChange(e) {
      this.account = e.value;
    },
    changep(e) {
      this.password = e.value;
    },
    changeV(e) {
      this.verify = e.value;
    },
    changePhone(e) {
      this.phone_number = e.value;
    },
    checkingTime() {
      let that = this;
      //判断是否开启
      if (this.state) {
        //判断显示时间是否已到0，判断记录时间是否已到总时间
        if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
          //记录时间增加 1
          this.recordingTime = this.recordingTime + 1;
          //显示时间，用总时间 - 记录时间
          this.currentTime = this.totalTime - this.recordingTime;
          //1秒钟后，再次执行本方法
          setTimeout(() => {
            //定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
            that.checkingTime();
          }, 1000);
        } else {
          //时间已完成，还原相关变量
          this.state = false; //关闭倒计时
          this.recordingTime = 0; //记录时间为0
          this.currentTime = this.totalTime; //显示时间为总时间
        }
      } else {
        //倒计时未开启，初始化默认变量
        this.state = false;
        this.recordingTime = 0;
        this.currentTime = this.totalTime;
      }
    },
    send_verify_code() {
      let that = this;
      if (!that.phone_number) {
        that.toast("Enter your phoneNumber");
        return false;
      }
      this.loading = true;
      send_verify(
        {
          mobile: that.phone_number,
          type: "2"
        },
        (res, flag) => {
          this.loading = false;
          if (flag) {
            if (res.code == "200") {
              that.toast(res.message);
              //把显示时间设为总时间
              that.currentTime = this.totalTime;
              //开始倒计时
              that.state = true;
              //执行倒计时
              that.checkingTime();
            } else {
              that.toast(res.message);
            }
          }
        }
      );
    },
    login_pw() {
      let that = this;
      if (!that.account) {
        that.toast("Enter your account");
        return false;
      }
      if (!that.password) {
        that.toast("Enter your password");
        return false;
      }
      this.loading = true;
      let account =
        that.account.indexOf("@") !== -1 ? that.account : that.account - 0;
      loginWithPw(
        {
          account: account,
          password: that.password
        },
        (res, flag) => {
          this.loading = false;
          if (flag) {
            if (res.code == "200") {
              this.loginSus(res);
            } else {
              that.toast(res.message);
            }
          }
        }
      );
    },
    login_ver() {
      let that = this;
      if (!that.phone_number) {
        that.toast("Enter your phoneNumber");
        return false;
      }
      if (!that.verify) {
        that.toast("Enter your verify");
        return false;
      }
      this.loading = true;
      verify_login(
        {
          phone_number: that.phone_number,
          verify: that.verify
        },
        (res, flag) => {
          this.loading = false;
          if (flag) {
            if (res.code == "200") {
              this.loginSus(res);
            } else {
              that.toast(res.message);
            }
          }
        }
      );
    },
    //登录
    login() {
      // 判断登录方式
      if (this.loginType !== "account") {
        this.login_ver();
      } else {
        this.login_pw();
      }
    },
    loginSus(res) {
      let that = this;
      this.loading = true;
      asCore.setBsessionid(res.data.users_uuid);
      if (that.loginType == "account") {
        var pref = weex.requireModule("storage");
        pref.setItem("as_username", that.account);
        pref.setItem("as_password", that.password);
        pref.setItem("userToken", res.token);
      }
      // const loginBroad = new BroadcastChannel("login");
      // loginBroad.postMessage("update");

      var notify = weex.requireModule("notify");
      notify.send("login", { name: "asd" });

      setTimeout(() => {
        this.loading = false;
         this.push("root:index.js")
      }, 2000);
    },
    register() {
      this.push("root:app/login/register.js");
    }
  }
};
</script>

<style scoped>
.bgimg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.iconfont {
  font-family: iconfont;
}

.h20 {
  height: 20px;
}

.codeBtn {
  height: 60px;
  color: #ffffff;
  line-height: 60px;
  font-size: 30px;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}

.inputIcon {
  font-size: 30px;
  color: #ffffff;
  width: 70px;
  text-align: left;
  justify-content: center;
  align-items: center;
}
.iconPhone {
  font-size: 30px;
  color: #fff;
}
.icons {
  font-size: 30px;
  color: #ffffff;
}
.eyeImg {
  width: 40px;
  height: 23px;
}

.wrappess {
  flex: 1;
  color: #ffffff;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.title {
  color: #ffffff;
  font-size: 60px;
  margin-top: 200px;
  text-align: center;
}

.input {
  flex: 1;
  height: 60px;
  padding-left: 20px;
  color: #ffffff;
  background-color: transparent;
}
.inputs{
   background-color: transparent;
}

.inputBox {
  margin-top: 60px;
  height: 60px;
  width: 556px;
  flex-direction: row;
  align-items: center;
}
.loginTypeBox {
  flex-direction: row;
  justify-content: flex-end;
  width: 750px;
  padding-right: 97px;
}
.loginType {
  text-align: right;

  color: #ffffff;
  padding: 0 30px;
  border-radius: 60px;
  height: 60px;

  line-height: 60px;
  margin-top: 20px;
  font-size: 22px;
  margin-bottom: 20px;
}
.loginType:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.singnIn {
  width: 580px;
  height: 80px;
  border-radius: 40px;
  background-color: #ffffff;
  color: #303030;
  font-weight: 600;
  text-align: center;
  line-height: 80px;
  font-size: 28px;
  margin-top: 102px;
}
.singnIn:active {
  background-color: #eee;
}
.registerBtn {
  width: 580px;
  height: 80px;
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #444444;
  font-weight: 600;
  text-align: center;
  line-height: 80px;
  font-size: 28px;
  margin-top: 50px;
}

.registerBtn:active {
  background-color: #eee;
}

.rowBox {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.br {
  border-right-color: #ffffff;
  border-right-width: 1px;
  border-right-style: solid;
}

.bb {
  border-bottom-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.boxItem {
  height: 60px;
  line-height: 60px;
  padding: 0 34px;
  font-size: 30px;
  margin-bottom: 50px;
  color: #ffffff;
  text-align: center;
}
</style>
